<template>
    <div class="box-1">
        <div class="title-tag"> {{props.tag}} </div>
        <div class="header-title">
            <Tag2 :title="props.title"/>
        </div>
        <div class="section-saying">
            <p> 我是liulianjia，一个拥有超过5年经验的全栈开发人员，在这里可以了解更多关于我的信息，或者阅读我的一些文章和笔记。</p>
        </div>
        <div class="section-social">
            <a-space size="large">
                <a-typography-link>
                    <a-tooltip placement="bottom" color="#1CD66C">
                        <template #title>
                            <span>微信</span>
                        </template>
                        <WechatFilled class="wechat" />
                    </a-tooltip>
                </a-typography-link>
                <a-typography-link>
                    <a-tooltip placement="bottom">
                        <template #title>
                            <span>Git Hub</span>
                        </template>
                        <GithubFilled class="git" />
                    </a-tooltip>
                </a-typography-link>
                <a-typography-link>
                    <a-tooltip placement="bottom" color="#FD2858">
                        <template #title>
                            <span>小红书</span>
                        </template>
                        <BookFilled class="book" />
                    </a-tooltip>
                </a-typography-link>
            </a-space>
        </div>
    </div>
</template>
<script setup>
import Tag2 from '../../components/provider/tag-2.vue'
import { WechatFilled, GithubFilled, BookFilled } from '@ant-design/icons-vue'

const props = defineProps({
    title: {
        type: String,
        default: "",
    },
    tag: {
        type: String,
        default: "",
    },
})
</script>
<style scoped lang="scss">
    .box-1 {
        margin: 0 0 32px;

        .title-tag {
            display: inline-block;
            font-size: 13px;
            line-height: 1;
            margin: 16px auto 24px;
            border: 1px solid #e0e0e0;
            border-radius: 36px;
            padding: 8px 22px 4px;
            color: #505050;
            text-align: center;
            font-family: "Special Elite", system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", "Hiragino Sans GB", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", Arial, SimSun, sans-serif;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .section-saying {
            font-size: 1rem;
            line-height: 160%;
            font-weight: 400;
            text-align: center;
            color: #505050;
            max-width: 480px;
            margin: 44px auto;
            text-align: center;

            p {
                font-size: .875rem;
                margin-bottom: .5em;
            }
        }

        .section-social {
            max-width: 280px;
            margin: auto;
            border-bottom: 1px dashed #ececec;
            padding-bottom: 20px;

            .wechat,
            .git,
            .book {
                font-size: 24px;
                color: #8A8A8A
            }

            .wechat:hover {
                color: #1CD66C;
                transition: 0.5s;
            }

            .git:hover {
                color: #000000;
                transition: 0.5s;
            }

            .book:hover {
                color: #FD2858;
                transition: 0.5s;
            }
        }
    }
</style>